/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="sfx-step-item" :class="[isCenter ? 'is-center' : 'is-flex']" :style="style">
        <div class="sfx-step__head" :class="`is-${status}`">
            <div class="sfx-step__line">
                <i class="sfx-step-line__inner" :style="lineStyle"></i>
            </div>
            <div class="sfx-step__icon" :style="pointer">
                <slot name="icon" :index="index">
                    <i v-if="icon" class="sfx-step-icon__inner fa" :class="[icon]"></i>
                    <div class="sfx-step__inner">{{index + 1}}</div>
                </slot>
            </div>
        </div>
        <div class="sfx-step__main" :class="`is-${status}`">
            <slot name="title" :index="index">
                <div class="sfx-step__title">{{ title }}</div>
            </slot>
            <slot name="description" :index="index">
                <div class="sfx-step__description">{{ description }}</div>
            </slot>
            <!-- 自定义模板插槽 -->
            <slot name="freeTpl" :index="index"></slot>
        </div>
    </div>
</template>
<style lang="stylus">
.sfx-step-item
    flex-shrink 1
    position relative
    &:last-of-type.is-flex
        flex-basis auto !important
        flex-shrink 0
        flex-grow 0
    &:last-of-type
        .sfx-step__line
            display none
    .sfx-step__head
        position relative
        .sfx-step__icon
            position relative
            z-index 1
            display inline-flex
            align-items center
            justify-content center
            width 30px
            height 30px
            border-radius 100%
            color #fff
            background #c0c4cc
            font-size 15px
            cursor default
        .sfx-step__line
            position absolute
            top 13px
            left 0
            right 0
            height 4px
            background #ccc
            .sfx-step-line__inner
                display block
                transition 0.3s ease-out
                box-sizing border-box
                width 0
                height 4px
    .sfx-step__main
        .sfx-step__title
            font-size 14px
            line-height 28px
        .sfx-step__description
            padding-right 20%
            font-size 12px
.sfx-step-item.is-center
    text-align center
    .sfx-step__head
        text-align center
        .sfx-step__line
            left 50%
            right -50%
    .sfx-step__main
        text-align center
        .sfx-step__description
            padding 0 20%
</style>
<script>

/**
 *  created by sch 2018/9/18
 */

const DEFAULT_BASE = 104;
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        description: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            index: -1,
            status: 'finish',
            lineStyle: {}
        };
    },
    computed: {
        stepActive () {
            return this.$parent.active;
        },
        isCenter () {
            return this.$parent.alignCenter;
        },
        style () {
            let style = {};
            let len = this.$parent.steps.length;
            let space = DEFAULT_BASE / (len - (this.isCenter ? 0 : 1)) + '%';
            if (this.index === len - 1) {
                style.maxWidth = DEFAULT_BASE / len + '%';
            }
            style.flexBasis = space;
            return style;
        },
        pointer () {
            let style = {};
            let active = this.$parent.active;
            if (this.index < active && this.canBack) {
                style.cursor = 'pointer';
            }
            return style;
        },
        canBack () {
            return this.$parent.canBack;
        }
    },
    created () {
        this.$parent.setSteps(this);
    },
    mounted () {

        /**
         * 初始化渲染步骤条
         * 监听index，当index发生变化的时候执行_updateStatus，返回取消监听函数
         * 直接添加对active的监听，可以拆开写
         */
        let unWatch = this.$watch('index', () => {
            this.$watch('stepActive', this._updateStatus, { immediate: true });
            unWatch(); // 用不到了，丢掉
        });
    },
    methods: {
        _updateStatus (val) {
            const PREV_CHILD = this.$parent.steps[this.index - 1]; // 获取当前step的前一个step
            /**
             * 目前设置了三种状态，结束、当前、等待执行，但是结束和当前的样式是一样的
             * 当active >= index的时候就相当于结束当前步骤，后续可能会改动
             */
            if (val > this.index) {
                this.status = 'finish';
            } else if (val === this.index) {
                this.status = 'process';
            } else {
                this.status = 'wait';
            }
            if (PREV_CHILD) {
                PREV_CHILD._stepProgress(this.status); // 如有不是第一步，则更新线的样式
            }
        },
        _stepProgress (status) {
            let step = DEFAULT_BASE;
            let style = {};
            if (status === 'wait') {
                step = 0;
            }
            style.width = step + '%';
            this.lineStyle = style;
        }
    }
};
</script>
 